<template>
  <div>
    <!--    上方搜索区域-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">

      <div  style="margin-left: 50px;margin-top: 10px">
        <el-form-item>
          <el-button type="primary" @click="openAddDialog" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delBatch">批量删除</el-button>
        </el-form-item>
      </div>

      <div style="margin-left: 50px">
        <!--模糊查询按钮：注意这是在el-form内-->
        <el-form-item label="优先级" prop="priority">
          <el-radio-group clearable v-model="keyword.priority">
            <!--标签中间的是,对外展现的,label中的1是表单数据,发给后端的-->
            <el-radio label="1">紧急</el-radio>
            <el-radio label="0">正常</el-radio>
          </el-radio-group>
        </el-form-item>

        <span style="position: relative;margin-left: 35px">
          <el-form-item label="生产计划编号" prop="producePlanNum">
          <el-input size="small" clearable v-model="keyword.producePlanNum" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
            重置
          </el-button>
        </el-form-item>
        </span>

      </div>





    </el-form>


    <!--添加/更新对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="producePlan" :rules="producePlanRules" ref="producePlanRulesForm">

        <h2>基本信息</h2>
        <el-form-item label="生产计划编号" prop="producePlanNum">
          <el-input v-model="producePlan.producePlanNum" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="计划状态">
          <el-input v-model="producePlan.planState" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-radio-group v-model="producePlan.priority">
            <!--标签中间的是,对外展现的,label中的1是表单数据,发给后端的-->
            <el-radio label="1">紧急</el-radio>
            <el-radio label="0">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="销售单号">
          <el-input v-model="producePlan.saleOrderNum" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="产品编码" prop="productCode">
          <el-input v-model="producePlan.productCode" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="计划产量" prop="planProduceNum">
          <el-input v-model="producePlan.planProduceNum" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="工艺" prop="craft">
          <el-input v-model="producePlan.craft" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="车间">
          <el-input v-model="producePlan.workshop" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="生产线">
          <el-input v-model="producePlan.produceLine" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>

        <el-button @click="addProduct">确认添加此产品</el-button>

        <h5 v-show="productShow">{{ '所添加产品:'+ producePlan.productCode }}</h5>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="addProPlan('producePlanRulesForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 排程对话框-->
    <el-dialog title="排程" :visible.sync="dialogFormVisible2" width="40%">
      <el-form :model="producePlan" ref="managePlanForm">

        <el-form-item label="计划开始时间" prop="planStartTime">
          <div class="block">
            <el-date-picker
              v-model="producePlan.planStartTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="计划结束时间" prop="planOverTime">
          <div class="block">
            <el-date-picker
              v-model="producePlan.planOverTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>

        </el-form-item>




      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelManagePlan">取 消</el-button>
        <el-button type="primary" @click="managePlan('managePlanForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!--      下方表格-->
    <el-table v-loading="loading" :data="producePlanList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column width="110" label="生产计划编号" align="center" prop="producePlanNum"/>
      <el-table-column width="110" label="计划状态" align="center" prop="planState">
        <template slot-scope="scope">
          <span>{{ scope.row.planState == "plan" ? '已排程' : '未排程' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" label="优先级" align="center" prop="priority">
        <template slot-scope="scope">
          <el-tag :type="scope.row.priority == 0?'':'danger'">
            <span>{{ scope.row.priority == 1 ? '紧急' : '正常' }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column width="110" label="产品编码" align="center" prop="productCode"/>
      <el-table-column width="110" label="产品名称" align="center" prop="productName"/>
      <el-table-column width="110" label="计量单位" align="center" prop="measureUnit"/>
      <el-table-column width="110" label="规格" align="center" prop="specification"/>
      <el-table-column width="110" label="计划产量" align="center" prop="planProduceNum"/>
      <el-table-column width="110" label="报工数量" align="center" prop="reportedNum"/>
      <el-table-column width="110" label="销售单号" align="center" prop="saleOrderNum"/>
      <el-table-column width="100" label="交付日期" align="center" prop="deliveryDate"/>
      <el-table-column width="100" label="工艺" align="center" prop="craft"/>
      <el-table-column width="110" label="车间" align="center" prop="workshop"/>
      <el-table-column width="110" label="生产线" align="center" prop="produceLine"/>
      <el-table-column width="100" label="计划开始日期" align="center" prop="planStartTime"/>
      <el-table-column width="100" label="计划结束日期" align="center" prop="planOverTime"/>
      <el-table-column width="100" label="实际开始日期" align="center" prop="realStartTime"/>
      <el-table-column width="100" label="实际结束日期" align="center" prop="realOverTime"/>
      <el-table-column width="110" label="创建人" align="center" prop="creater"/>
      <el-table-column width="100" label="创建时间" align="center" prop="createTime"/>

      <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleManagePlan(scope.row)"
          >排程
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

// import produceOrder from "@/views/produce/produceOrder/index.vue";


import {addProducePlan, delBatchPlans, delPlanByNum, editManagePlan, editPlan, getList} from "@/api/producePlan";
import {addProduceOrder, delBatchOrders, delOrderByNum, editOrder} from "@/api/produceOrder";

export default {
  name: "ProduceOrder",
  // computed: {
  //   produceOrder() {
  //     return produceOrder
  //   }
  // },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,

      // 暂未用
      keyword: {
        producePlanNum:null,
        priority:null,
      },

      productShow: false,

      multipleSelection: [],
      idList: [],

      //增加页面所用
      title: "",
      producePlan: {
        producePlanNum: null,
        planState: null,
        priority: null,
        saleOrderNum: null,
        productCode: null,
        planProduceNum: null,
        craft: null,
        workshop: null,
        produceLine: null,
        // 排程
        planStartTime: null,
        planOverTime: null,

      },


      // 遮罩层
      loading: true,
      //生产订单表格数据
      producePlanList: [],

      dialogFormVisible: false,
      dialogFormVisible2: false,

      producePlanRules: {
        producePlanNum: [
          {required: true, message: '生产订单编号不能为空', trigger: 'blur'},
        ],
        priority: [
          {required: true, message: '优先级不能为空', trigger: 'blur'},
        ],
        productCode: [
          {required: true, message: '产品编码不能为空', trigger: 'blur'},
        ],
        planProduceNum: [
          {required: true, message: '计划产量不能为空', trigger: 'blur'},
        ],
        craft: [
          {required: true, message: '工艺不能为空', trigger: 'blur'},
        ],
      },
      producePlanRules2: {
        producePlanNum: [
          {required: true, message: '计划开始日期不能为空', trigger: 'blur'},
        ],
        producePlanNumb: [
          {required: true, message: '计划结束日期不能为空', trigger: 'blur'},
        ],

      },


    }
  },
  methods: {

    fetchData() { // 查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // 赋值参数 带到后端模糊查询
        priority: this.keyword.priority,
        producePlanNum: this.keyword.producePlanNum
      }

      getList(params).then(res => {
        let pageInfo = res.data;
        console.log("pageInfo", pageInfo)
        this.loading = false;
        console.log("pageInfo.list", pageInfo.list)
        this.producePlanList = pageInfo.list;
        console.log("this.producePlanList", this.producePlanList)
        this.total = pageInfo.total
      })
    },

    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    search() {
      this.fetchData()
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.fetchData()
    },

    // 多选框选中数据
    handleSelectionChange(val) {
      this.idList = [];  // 每次清空前先置空数组
      this.multipleSelection = val; // 得到选中的对象
      console.log("multipleSelection", this.multipleSelection)
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.idList.push(this.multipleSelection[i].producePlanNum)
      }
      console.log("idList", this.idList)
    },


    addProduct() {
      this.$confirm('确认添加”' + this.producePlan.productCode + '“产品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.productShow = true
        // findProduct({
        //   itemTypeId: this.produceOrder.productCode // 注意此itemTypeId命名是因为后端传参名
        // })
      })
    },

    //取消添加响应
    cancelAdd() {

      this.dialogFormVisible = false;
      this.producePlan = {
        producePlanNum: null,
        planState: null,
        priority: null,
        saleOrderNum: null,
        productCode: null,
        planProduceNum: null,
        craft: null,
        workshop: null,
        produceLine: null,
        // 排程
        planStartTime: null,
        planOverTime: null,
      };
      this.$message({
        type: 'info',
        message: '已取消' + this.title,
        duration: 1000
      });

    },

    //取消排程响应
    cancelManagePlan() {

      this.dialogFormVisible2 = false;
      this.producePlan = {
        producePlanNum: null,
        planState: null,
        priority: null,
        saleOrderNum: null,
        productCode: null,
        planProduceNum: null,
        craft: null,
        workshop: null,
        produceLine: null,
        // 排程
        planStartTime: null,
        planOverTime: null,
      };
      this.$message({
        type: 'info',
        message: '已取消排程',
        duration: 1000
      });

    },

    //确认添加按钮
    addProPlan(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "创建生产计划") {
            // 此处执行添加...
            addProducePlan(this.producePlan).then(res => {
              this.$message({
                type: 'success',
                message: '创建成功!'
              });
              this.fetchData();
              this.$refs[formName].resetFields();
            })
          } else if (this.title == "修改计划") {
            // 此处执行编辑...
            console.log(this.title)
            editPlan(this.producePlan).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.fetchData();
              this.$refs[formName].resetFields();
            })


          }
        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });

    },
    // 点击操作-排程
    handleManagePlan(row) {
      this.dialogFormVisible2 = true;
      this.producePlan = row; //回显，顺便赋值

    },

    //确认排程按钮
    managePlan(formName) {

      this.$confirm('是否确认排程此生产计划？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("managePlan 确定前状态",this.producePlan.planState)
        this.producePlan.planState = 'plan';
        console.log("managePlan 确定后状态1",this.producePlan.planState)
        // 此处执行添加...
        editManagePlan(this.producePlan).then(res => {
          this.$message({
            type: 'success',
            message: '排程成功!'
          });
          console.log("managePlan 确定后状态2",this.producePlan.planState)
          this.fetchData();
          this.$refs[formName].resetFields();
        })
        this.dialogFormVisible2 = false;

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改',
          duration: 1000
        });
      });
      this.dialogFormVisible2 = false;

    },


    // 点击操作-编辑
    handleUpdate(row) {
      this.title = "修改计划";
      this.dialogFormVisible = true;

      console.log("以下是handleUpdate中的row")
      console.log(row);
      this.producePlan = row; //回显，顺便赋值

    },
    // 点击操作-作废
    handleDelete(row) {
      this.$confirm('是否删除生产计划编号为”' + row.producePlanNum + '“的数据信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPlanByNum(
          {num: row.producePlanNum}
        ).then(res => {

          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        });
      });

    },


    // 批量删除
    delBatch() {
      this.$confirm('是否确认删除编号为"[' + this.idList + ']"的生产计划？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("执行到批量删除前..")
        let idStr = this.idList.join(",")
        console.log("idStr为", idStr)

        delBatchPlans({
          ids: this.idList.join(",")// 注意此ids命名是因为后端传参名
        }).then(res => {
          console.log("执行到批量删除后then..")

          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        });
      });

    },

    //添加所用方法：
    openAddDialog() {
      this.title = '创建生产计划';
      this.dialogFormVisible = true;
    }


  },

  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    console.log("created()函数运行")
    this.fetchData()
    console.log("created()函数中查找数据完毕?..")
  },

}

</script>

<style scoped lang="scss">

</style>
